<template>
  <view>
    <view class="back"></view>
    <view class="content">

      <view class="nav-bar-box">
        <kt-nav-bar title="安装"
                    ref="navBarIndex"
                    :icon="$kt.file.byPath('icon/communityFill.svg')"
        ></kt-nav-bar>
      </view>
      <view :style="'height: '+ktNavBarHeight+'px'"></view>

      <view class="box">
        <view style="font-size: 35rpx;font-weight: bold">
          安装说明
        </view>
        <view style="height: 20rpx"></view>
        <view style="font-size: 28rpx;color: #666666;">
          <view>1、安装时，请确保使用准确位置！</view>
          <view style="height: 20rpx"></view>
          <view>2、请规范安装，如有受伤，请及时就医！</view>
        </view>
      </view>

      <view style="height: 30rpx"></view>

      <view class="box">
        <u-row>
          <u-col :span="6">
            <view
            style="font-size: 40rpx;font-weight: bold;"
            >DTU安装</view>
          </u-col>
        </u-row>


        <view>

          <view style="height: 30rpx"></view>

          <view class="m-f-box">

            <view class="m-f-box-input">
              <u-row>
                <u-col :span="3">
                  <view class="m-f-box-input-label">
                    IMEI
                  </view>
                </u-col>
                <u-col :span="8">
                  <input
                      v-model="requestParam.imei"
                      placeholder="输入或扫描二维码" class="m-f-box-input-input"></input>
                </u-col>
                <u-col :span="1">
                  <view
                      class="scan-box"
                      @click="scan"
                      style="font-size: 24rpx;color: #f56c6c;">
                    <u-icon name="scan" size="40rpx"></u-icon>
                  </view>
                </u-col>
              </u-row>
            </view>


            <view style="height: 30rpx"></view>


            <view class="m-f-box-input">
              <u-row>
                <u-col :span="3">
                  <view class="m-f-box-input-label">
                    我的位置
                  </view>
                </u-col>
                <u-col :span="8.5">
                  <location-tab></location-tab>
                </u-col>
              </u-row>
            </view>


            <view style="height: 30rpx"></view>

            <view class="m-f-box-input">
              <u-row>
                <u-col :span="3">
                  <view class="m-f-box-input-label">
                    位置补充
                  </view>
                </u-col>
                <u-col :span="8.5">
                  <input placeholder="输入内容" class="m-f-box-input-input"></input>
                </u-col>
              </u-row>
            </view>

            <view style="height: 30rpx"></view>

            <view class="m-f-box-input">
              <u-row>
                <u-col :span="3">
                  <view class="m-f-box-input-label">
                    设备备注
                  </view>
                </u-col>
                <u-col :span="8.5">
                  <input placeholder="输入内容" class="m-f-box-input-input"></input>
                </u-col>
              </u-row>
            </view>

            <view style="height: 30rpx"></view>

            <view class="m-f-box-input">
              <u-row>
                <u-col :span="3">
                  <view class="m-f-box-input-label">
                    上传照片
                  </view>
                </u-col>
                <u-col :span="8.5">
                  <view class="upload-btn">
                    +
                  </view>
                </u-col>
              </u-row>
            </view>


            <view style="height: 30rpx"></view>



            <view style="height: 20rpx"></view>

            <view
                v-if="true"
                style="opacity: .6">
              <kt-button>未填写详细</kt-button>
            </view>
            <view v-else>
              <kt-button>确定</kt-button>
            </view>

            <view style="color:#f56c6c;padding: 20rpx;font-size: 24rpx;text-align: center"
            >若有受伤，请及时就医！
            </view>

          </view>


        </view>

      </view>
    </view>




    <view style="height: 30rpx;"></view>
    <view style="height: 120rpx"></view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      ktNavBarHeight: 0,
      /**
       * 选中的菜单
       * 话费：phoneBill
       * 电费：electricityBill
       */
      mSelected: "phoneBill",
      requestParam:{
        imei: "",
      }
    };
  },
  mounted() {
    this.ktNavBarHeight = this.$refs.navBarIndex.getHeight();
  },
  methods: {
    mSelect(code) {
      this.mSelected = code;
    },
    accountNumberPromptPopupOpen(){
      this.$refs.accountNumberPromptPopup.open();
    },
    scan() {
      uni.scanCode({
        success: (res) => {
          this.requestParam.imei = res.result;
        },
      });
    },
  },
}
</script>

<style lang="scss" scoped>

.back {
  background-color: #f0f0f0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.nav-bar-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100vw;
}

.content {
  padding: 30rpx;
}

.box {
  background-color: #FFFFFF;
  padding: 30rpx;
  border-radius: 20rpx;
}

.m-box {
  background-color: #fff;
  margin: 0;
  padding: 0;
  display: inline-block;

  .m {
    display: inline-block;
    font-size: 32rpx;
    color: #333;
    width: 50%;
    padding: 10rpx 20rpx;
    border: 1rpx solid #333;
    box-sizing: border-box;
    // 文字间距
    letter-spacing: 2rpx;
    margin: 0;
  }

  .m1 {
    border-radius: 30rpx 0 0 30rpx;
  }

  .m2 {
    border-radius: 0 30rpx 30rpx 0;
  }
}

.r-box {
  position: relative;
  display: inline-block;
  margin: 20rpx;
  border: 3rpx solid #999999;
  padding: 20rpx;
  color: #333333;
  border-radius: 20rpx;

  .r-box-discount {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24rpx;
    border-radius: 20rpx 0 20rpx 0;
    padding: 5rpx 10rpx 5rpx 10rpx;
    background-color: #bbbbbb;
  }
}

.m-label {
  font-size: 28rpx;
  color: #666666;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}

.m-f-box {
  width: 100%;
  margin-bottom: 20rpx;

  .m-f-box-input {
    font-size: 35rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #999999;

    .m-f-box-input-label {
      font-size: 28rpx;
    }
  }
}

.m-radio {
  margin-right: 20rpx;
}

.account-number-prompt:active{
  transform: scale(0.9);
}

.scan-box:active{
  transform: scale(0.9);
}

.upload-btn{
  width: 200rpx;
  height: 200rpx;
  background-color: #f0f0f0;
  line-height: 200rpx;
  text-align: center;
  border-radius: 20rpx;
  font-size: 50rpx;
}

.upload-btn:active{
  transform: scale(0.9);
}
</style>
